<template>
	<view class="custom-media">
		<uni-notice-bar show-icon scrollable color="#c80802" background-color="#FCF3F2"
			text="新年佳节，岁岁平安，百事顺心，笑口常开，阖家欢乐，喜气洋洋，其乐融融，生活美满，兔年大吉！" />
		<view class="media-box" @click="previewVideo">
			<image class="media-cover" :src="cover" mode="aspectFill"></image>
			<view class="media-bg"></view>
			<van-icon class="preview-icon" name="play-circle-o" />
		</view>

		<view class="custom-item" v-if="!isShare">
			<view class="title">
				<text>分享标题</text>
				<text class="example" @click="handleWatchExample">查看示例效果</text>
			</view>

			<input class="custom-input" v-model="shareTitle" type="text" placeholder="例如:辞岁迎新，兔年来到，福兔祝您鸿福齐天，万事如意！"
				placeholder-class="placeholder-style">
		</view>

		<!-- 新年浮窗 -->
		<image class="floating-w" v-if="isShare && floatingShow" @click="handleCustomNewYear"
			src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/floating-w.png" mode="widthFix"></image>
		<image class="floating-h" v-else-if="isShare && !floatingShow"
			src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/floating-h.png" mode="heightFix"
			@click="handleCustomNewYear"></image>

		<button class="submit-btn" v-if="!isShare" open-type="share">生成定制祝福</button>
		<button class="custom-btn" v-if="isShare" @click="handleCustomNewYear">我也要制作新年祝福</button>
		<button class="submit-btn" v-if="isShare" open-type="share">转发分享</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				floatingShow: true,
				isShare: false,
				shareTitle: "",
				cover: "",
				mediaUrl: "",
			}
		},
		onLoad(options) {
			let {
				isShare,
				cover,
				mediaUrl,
			} = options;
			console.log('media-options', options);
			this.cover = cover;
			this.mediaUrl = mediaUrl;
			this.isShare = isShare;
			let that = this;
			setTimeout(() => {
				that.floatingShow = false;
			}, 2000)
		},
		methods: {
			// 查看示例效果
			handleWatchExample() {
				var dataArray = ["https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-share.png"];
				uni.previewImage({
					urls: dataArray,
					current: "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-share.png"
				});
			},
			// 制作新年祝福
			handleCustomNewYear() {
				uni.navigateTo({
					url: "/packageC/new-year/custom-new-year"
				})
			},
			previewVideo() {
				let that = this;
				wx.previewMedia({
					sources: [{
						url: that.mediaUrl,
						type: "video",
						// poster: that.cover
					}]
				})
			},
			// 分享当前用户已完成点检内容给好友
			onShareAppMessage() {
				return this.getShareData();
			},
			getShareData() {
				let title = this.shareTitle ? this.shareTitle : "辞岁迎新，兔年来到，福兔祝您鸿福齐天，万事如意！";
				let imageUrl = "https://biapi.vaubang.cn/UploadFiles/Images/newYear/share-cover.png";
				let path = `/packageC/new-year/custom-media?cover=${this.cover}&isShare=true&mediaUrl=${this.mediaUrl}`;
				console.log('path', path);
				return {
					title,
					imageUrl,
					path
				};
			},
		},
	}
</script>

<style lang="less">
	.custom-media {
		.floating-w {
			position: fixed;
			right: 5px;
			bottom: 100px;
			z-index: 99;
			width: 80px;
			height: 67px;
			transition: all 0.5s linear;
		}

		.floating-h {
			position: fixed;
			right: 2px;
			bottom: 140px;
			width: 45px;
			height: 140px;
			transition: all 0.5s linear;
			z-index: 99;
		}

		.custom-btn {
			margin: 40rpx 30rpx;
			border: 1px solid #c80802;
			background-color: transparent;
			color: #c80802;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
		}

		.custom-item {
			margin: 20px;

			.title {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.8);

				.example {
					font-size: 12px;
					margin-left: 10px;
					color: #c80802;
					font-weight: 500;
				}
			}

			.placeholder-style {
				color: #ddd;
			}

			.custom-input {
				height: 38px;
				line-height: 38px;
				padding: 0 10px;
				box-sizing: border-box;
				font-size: 14px;
				color: #666;
				background-color: #fff;
				border-radius: 4px;
				margin-top: 10px;
				border: 1px solid rgba(0, 0, 0, 0.05);
			}

			.type-radio-group {
				margin-top: 10px;
			}
		}

		.media-box {
			width: 100%;
			height: 200px;
			position: relative;

			.media-cover {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.media-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0.7;
			}

			.preview-icon {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -15px;
				margin-top: -15px;
				font-size: 30px;
				z-index: 3;
				color: #fff;
			}
		}

		.submit-btn {
			margin: 40rpx 30rpx;
			border: none;
			background-color: #c80802;
			color: #fff;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;

			&:active {
				background-color: #AF0500;
			}
		}

		.share-box {
			position: fixed;
			right: 0px;
			bottom: 140rpx;
			border-top-left-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			background-color: #008aff;
			box-sizing: border-box;
			color: #fff;
			font-size: 28rpx;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
			line-height: unset;
			border: none;
			z-index: 99;
			padding: 12rpx 20rpx;
			text-align: center;
		}
	}
</style>
